<template>
  <view>
    <view class="filecon">
      <view @click="checkPermission">
        <image class="fileconimg" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/add.png"
          mode=""></image>
      </view>
      <view :key="index" v-for="(item, index) in pic_arr">
        <image class="fileconimg" :src="Preurl + item" mode="aspectFill"></image>
        <image @click="deleteclick(index)" class="delimg"
          src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/del.png" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
import * as permissionCheck from '@/chronicDisease/utils/permissionCheck.js'
export default {
  props: {
    // picarr:{
    // 	type: Array,
    // 	default () {
    // 		return [];
    // 	},
    // }
  },
  data() {
    return {
      baseUrl: '',//上传图片接口
      pic_arr: [],
      Preurl: '',//前缀地址
    }
  },
  created() {
    this.baseUrl ='https://applet.youtuyiliao.com/api/bedServer/upload/public/uploadImage'
    this.Preurl = this.$store.state.chronic.imageUrl
    // this.pic_arr=this.picarr
  },
  methods: {
    //删除图片
    deleteclick(index) {
      this.pic_arr.splice(index, 1)
      console.log('del', this.pic_arr)
      this.$emit('delarr', this.pic_arr)
    },
    //添加照片
    addImg() {
      var that = this
      let baseUrl = 'https://applet.youtuyiliao.com/api/bedServer/user/upload/public/uploadImage'
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', "camera"], //从相册，摄像头选择
        success: (res) => {
          console.log(res)
          let that = this
          uni.uploadFile({
            url: that.baseUrl,
            filePath: res.tempFilePaths[0],
            name: 'file',
            success: (res) => {
              console.log("维吾尔", res)
              let img = JSON.parse(res.data)
              console.log("维吾尔", img)
              that.pic_arr.push(img.data)
              this.$emit('uploadarr', that.pic_arr)
              this.$emit('uploadchange', img.uploadUrl)
              console.log("维吾尔", that.pic_arr)
            }
          });
        }
      })
    },
    checkPermission() {
      permissionCheck.premissionCheckWrap('CAMERA_EXTERNAL_STORAGE').then(() => {
        this.addImg()
      })
    }
  }
}
</script>

<style>
.filecon {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.fileconimg {
  height: 160rpx;
  width: 160rpx;
  text-align: center;
  margin: 20rpx auto;
}

.filecon>view {
  width: 25%;
  position: relative;
}

.delimg {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: calc(50% - 60rpx);
  top: 30rpx;
}
</style>